import { useMemo } from "react";
import { useComponentsStore } from "../../stores/components";

import { Button } from "antd";

export function Header() {
    const { mode, setMode, setCurComponentId } = useComponentsStore();

    const btnTitle = useMemo(()=>{
        return mode === 'edit' ? '预览' : '退出预览';
    }, [mode]);

    return <div className="w-[100%] h-[100%]">
        <div className="h-[50px] flex justify-between items-center px-[20px]">
            <div>低代码编辑器</div>
            <Button type="primary" onClick={()=>{
                if(mode === 'edit') {
                    setMode('preview');
                    setCurComponentId(null);
                }else {
                    setMode('edit');
                }
            }}>{btnTitle}</Button>
        </div>
    </div>
}